<template>
  <div>
    <el-dialog title="销量" :visible.sync="show" :before-close="cancel" width="1100px">
      <div slot="title">
        <span style="float: left; font-weight: bold"> 销量 </span>
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: -20px;
            position: absolute;
            left: 20px;
            width: 100%;
          "
        >
          <span style="font-size: 18px; font-weight: bold">{{ formData.skuNo }}</span>
        </div>
      </div>

      <div>
        <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 10px">
          <el-date-picker
            @change="getList"
            :clearable="false"
            v-model="time"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </div>

        <div id="saleChart" style="width: 100%; height: 600px"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSkuSalesVolumeBarChart } from '@/api/statistics/skuSaleSupplier'
import * as echarts from 'echarts'

const handlePercent = (value, total) => {
  let percent = (+(value / total) * 100).toFixed(2)
  isNaN(percent) ? (percent = 0) : percent
  return `${percent}%`
}
export default {
  name: 'saleChart',
  props: {
    /**
     * title
     */
    title: {
      type: String,
      default: '总销量',
    },
    /**
     * legendWidth
     */
    legendWidth: {
      type: Number,
      default: 100,
    },
    formData: {
      type: Object,
      default: () => {},
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      time: [],
    }
  },

  mounted() {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.time = this.formData.time
        this.getList()
      }
    },
  },

  computed: {},

  methods: {
    /** 初始化图表 */
    drawEcharts(data) {
      let self = this
      const _data = data.map((item) => {
        return {
          value: item.skuCount,
          name: item.typeName,
          labelLine: { show: true },
          label: { show: true },
        }
      })
      var chartDom = document.getElementById('saleChart')
      this.myChart = echarts.init(chartDom)

      let tatalSale = 0
      data.map((i) => {
        tatalSale += i.skuCount || 0
      })
      var option = {
        title: {
          text: [
            `{a|${this.title}:}`,
            '{b|}' /** */,
            `{c|${self.useThousand ? self.$thousand(tatalSale) : tatalSale}}`,
          ].join('\n'),
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 'bold',
                lineHeight: 30,
              },
              b: {
                // lineHeight: 10, // 控制空行高度
              },
              c: {
                fontSize: 20,
                fontWeight: 'bold',
                lineHeight: 30,
              },
            },
          },
          textAlign: 'center',
          textVerticalAlign: 'middle',
          left: '59.5%',
          top: '50%',
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.5)',
          padding: [10, 25],
          textStyle: {
            color: '#fff',
            fontSize: 13,
          },
          formatter: function (params) {
            const { name, value, color } = params
            return `
            <div style="font-weight:bold;">
              <span style="color:${color}"> ● </span>
              ${name} : ${value}
              </div>
            <div style="text-align:center;">${handlePercent(value, tatalSale)}</div>
              `
          },
        },

        legend: {
          orient: 'vertical',
          left: 10,
          itemWidth: 0,
          itemHeight: 0,
          formatter: function (name) {
            var data = option.series[0].data
            var target = data.filter(function (item) {
              return item.name === name
            })[0]
            var value = target ? target.value : ''
            return '{a|' + name + '}  ' + value
          },
          textStyle: {
            rich: {
              a: {
                width: this.legendWidth,
                height: 20,
                align: 'center',
                color: '#fff',
                backgroundColor: 'inherit',
              },
            },
          },
        },

        series: [
          {
            type: 'pie',
            radius: ['40%', '85%'],
            center: ['60%', '50%'],

            itemStyle: {
              borderRadius: 5,
            },
            selectedMode: 'single',
            data: _data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              normal: {
                formatter: function (e) {
                  let data = e.data
                  if (data.value == 0) {
                    data.labelLine.show = false
                    data.label.show = false
                  } else {
                    return `${data.name}:${e.value}`
                  }
                },
              },
            },
          },
        ],
      }

      option && this.myChart.setOption(option)
    },

    /**  */
    getList() {
      const data = {
        startTime: this.time[0],
        endTime: this.time[1],
        skuId: this.formData.skuId,
      }
      getSkuSalesVolumeBarChart(data).then((res) => {
        this.$nextTick(() => {
          this.drawEcharts(res.data)
        })
      })
    },

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
